<template>
  <van-popup
    :show="visible"
    :overlay="false"
    :custom-style="customStyle"
    @after-enter="closeEvent"
  >
    <view class="container">
      <image :src="image" class="logo" v-if="image" />
      <view class="content">{{ content }}</view>
    </view>
  </van-popup>
</template>

<script setup name="PopupToast">
const customStyle = "background: rgba(0, 0, 0, 0.6);border-radius: 20rpx;";
defineProps({
  // 是否显示
  visible: Boolean,
  // 图标地址
  image: {
    type: String,
    default: "",
  },
  // 提示内容
  content: String,
});

const emits = defineEmits(["close"]);

function closeEvent() {
  setTimeout(() => {
    emits("close");
  }, 2000);
}
</script>

<style lang="scss" scoped>
.container {
  text-align: center;
  width: 360rpx;
  padding: 47rpx 0;
  .logo {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 20rpx;
  }
  .content {
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
